<template>
  <div style="width:1100px;height: 560px;">
  <el-row :gutter="20">
    <el-col :span="10" :offset="14">
      <el-row>
        <el-input
            placeholder="请输入订单编号"
            v-model="input"
            style="width: 250px;padding: 20px;"
            clearable>
        </el-input>
        <el-button @click="getorder(input)" type="primary" icon="el-icon-search">搜索</el-button>
      </el-row>
    </el-col>
  </el-row>

  <el-tabs style="position: relative;width: 100%;top:-50px;" v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first" @click="getAll">
      <el-table
          height="490"
          :data="orderList"
          border
          stripe
          style="">
        <el-table-column
            prop="id"
            label="订单编号"
            width="60">

        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名"
            width="130">
        </el-table-column>

        <el-table-column
            prop="email"
            width="170"
            label="下单邮箱">
        </el-table-column>
        <el-table-column
            prop="name"
            width="80"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="phone"
            width="120"
            label="电话">
        </el-table-column>
        <el-table-column
            prop="province"
            width="80"
            label="省">
        </el-table-column>
        <el-table-column
            prop="city"
            width="80"
            label="市">
        </el-table-column>
          <el-table-column
              prop="addr"
              width="150"
              label="具体地址">
          </el-table-column>
        <el-table-column
            prop="status"
            width="80"
            label="状态">
          <template slot-scope="scope">
            <label v-if="scope.row.status===1" style="color:#6dab5e ">已发货</label>
            <label v-if="scope.row.status===0" style="color:#396aa6 ">未发货</label>
            <label v-if="scope.row.status===2" style="color:rgba(2,1,1,0.85) ">已收货</label>
          </template>
        </el-table-column>
          <el-table-column
              prop="exchangeTime"
              width="150"
              label="发货时间">
          </el-table-column>


        <el-table-column
            width="112"
            fixed="right"
            label="操作">
          <template slot-scope="scope">
            <el-row>

              <i class="el-icon-edit" v-if="scope.row.status===0" @click="choose(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-truck" v-if="scope.row.status===0" @click="send(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-delete" @click="deleteOrder(scope.row)"
                 style="padding: 5px"></i>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>

    <el-tab-pane label="未发货" name="second">
      <el-table height="490"
          :data="orderList0"
          border
          stripe
          >
        <el-table-column
            prop="id"
            label="订单编号"
            width="60">

        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名"
            width="130">
        </el-table-column>

        <el-table-column
            prop="email"
            width="170"
            label="下单邮箱">
        </el-table-column>
        <el-table-column
            prop="name"
            width="80"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="phone"
            width="120"
            label="电话">
        </el-table-column>
        <el-table-column
            prop="province"
            width="80"
            label="省">
        </el-table-column>
        <el-table-column
            prop="city"
            width="80"
            label="市">
        </el-table-column>
        <el-table-column
            prop="addr"
            width="150"
            label="具体地址">
        </el-table-column>
        <el-table-column
            prop="status"
            width="80"
            label="状态">
          <template slot-scope="scope">
            <label v-if="scope.row.status===1" style="color:#6dab5e ">已发货</label>
            <label v-if="scope.row.status===0" style="color:#396aa6 ">未发货</label>
            <label v-if="scope.row.status===2" style="color:rgba(2,1,1,0.85) ">已收货</label>
          </template>
        </el-table-column>
          <el-table-column
              prop="exchangeTime"
              width="150"
              label="发货时间"
          >
          </el-table-column>


        <el-table-column
            width="112"
            fixed="right"
            label="操作">
          <template slot-scope="scope">
            <el-row>

              <i class="el-icon-edit" v-if="scope.row.status===0" @click="choose(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-truck" v-if="scope.row.status===0" @click="send(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-delete" @click="deleteOrder(scope.row)"
                 style="padding: 5px"></i>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>
    <el-tab-pane label="已发货" name="third" >
      <el-table height="490"
          :data="orderList1"
          border
          stripe
          style="">
        <el-table-column
            prop="id"
            label="订单编号"
            width="60">

        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名"
            width="130">
        </el-table-column>

        <el-table-column
            prop="email"
            width="170"
            label="下单邮箱">
        </el-table-column>
        <el-table-column
            prop="name"
            width="80"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="phone"
            width="120"
            label="电话">
        </el-table-column>
        <el-table-column
            prop="province"
            width="80"
            label="省">
        </el-table-column>
        <el-table-column
            prop="city"
            width="80"
            label="市">
        </el-table-column>
        <el-table-column
            prop="addr"
            width="150"
            label="具体地址">
        </el-table-column>
        <el-table-column
            prop="status"
            width="80"
            label="状态">
          <template slot-scope="scope">
          <label v-if="scope.row.status===1" style="color:#6dab5e ">已发货</label>
          <label v-if="scope.row.status===0" style="color:#396aa6 ">未发货</label>
          <label v-if="scope.row.status===2" style="color:rgba(2,1,1,0.85) ">已收货</label>
        </template>
        </el-table-column>

          <el-table-column
              prop="exchangeTime"
              width="150"
              label="发货时间"
          >
        </el-table-column>
        <el-table-column
            width="112"
            fixed="right"
            label="操作">
          <template slot-scope="scope">
            <el-row>

              <i class="el-icon-edit" v-if="scope.row.status===0" @click="choose(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-truck" v-if="scope.row.status===0" @click="send(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-delete" @click="deleteOrder(scope.row)"
                 style="padding: 5px"></i>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>
    <el-tab-pane label="已收货" name="fourth" >
      <el-table
          height="490"
          :data="orderList2"
          border
          stripe
          style="">
        <el-table-column
            prop="id"
            label="订单编号"
            width="60">

        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名"
            width="130">
        </el-table-column>

        <el-table-column
            prop="email"
            width="170"
            label="下单邮箱">
        </el-table-column>
        <el-table-column
            prop="name"
            width="80"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="phone"
            width="120"
            label="电话">
        </el-table-column>
        <el-table-column
            prop="province"
            width="80"
            label="省">
        </el-table-column>
        <el-table-column
            prop="city"
            width="80"
            label="市">
        </el-table-column>
        <el-table-column
            prop="addr"
            width="150"
            label="具体地址">
        </el-table-column>
        <el-table-column
            prop="status"
            width="80"
            label="状态">
          <template slot-scope="scope">
            <label v-if="scope.row.status===1" style="color:#6dab5e ">已发货</label>
            <label v-if="scope.row.status===0" style="color:#396aa6 ">未发货</label>
            <label v-if="scope.row.status===2" style="color:rgba(2,1,1,0.85) ">已收货</label>
          </template>
        </el-table-column>
          <el-table-column
              prop="exchangeTime"
              width="150"
              label="发货时间"
          >


        </el-table-column>
        <el-table-column
            width="112"
            fixed="right"
            label="操作">
          <template slot-scope="scope">
            <el-row>

              <i class="el-icon-edit" v-if="scope.row.status===0" @click="choose(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-truck" v-if="scope.row.status===0" @click="send(scope.row)"
                 style="padding: 5px"></i>
              <i class="el-icon-delete" @click="deleteOrder(scope.row)"
                 style="padding: 5px"></i>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>
  </el-tabs>

  <el-dialog
      title="修改订单地址"
      :visible.sync="panel"
      width="30%"
      :before-close="handleClose">
      <span>
        <div class="demo-input-suffix">
          <el-row>
          订单号：
            <el-input style="width:250px;padding:10px"
                      :disabled="true"
                      v-model="id"
                      clearable>
              {{ id }}
            </el-input>
          </el-row>
        </div>
        <div class="demo-input-suffix">
          <el-row>
          姓 名 ：
            <el-input style="width:250px;padding:10px"

                      v-model="name"
                      clearable>
              {{name }}
            </el-input>
          </el-row>
        </div>
        <div class="demo-input-suffix">
          <el-row>
          电话号：
            <el-input style="width:250px;padding:10px"
                      v-model="phone"
                      clearable>
              {{ phone }}
            </el-input>
          </el-row>
        </div>

       <el-row>
         省市区：
                  <el-cascader style="width:250px;padding:10px"
                      placeholder="请点击选择地址"
                      :options="options"
                      @change="handleChange"
                  ></el-cascader>
           </el-row>
        <el-row>
          详细地址：
           <el-input style="width:250px;padding:10px"
               v-model="addr">
             {{ addr }}
         </el-input>
        </el-row>



      </span>

    <span slot="footer" class="dialog-footer">
    <el-button @click="panel = false" type="danger">取 消</el-button>
    <el-button type="primary" @click="editAddr()">确 定</el-button>
  </span>
  </el-dialog>

  </div>
</template>

<script>
import {
  searchOrder,
  getAllOrders,
  getOrdersByStatus,
  changeOrdersStatus,
  deleteOrder,
  changeOrdersAddress,
} from "@/api/api";

export default {
  name: "order",
  data() {
    return {

      activeName: 'first',
      orderList: [],
      orderList0: [],
      orderList1: [],
      orderList2: [],
      input: '',
      panel: false,
      id: '',
      city: '',
      province: '',
      area: '',
      phone:'',
      name:'',
      addr: '',
      fileList: [],
      // 地址选择器
      options: [],
      selectedOptions: [],
      cityArr: [], //城市列表
      areaArr: [], //区县列表
    }
  },
  mounted() {
    this.initDistPicker();
    this.getAll();
    this.getStatus();
  },
  methods: {
    getStatus(){
      getOrdersByStatus(1).then((res) => {
        if (res.data.code === '200') {
          this.orderList1 = res.data.data;
        }else{ console.log(res.data.message)
          console.log(res.data.data);}
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })
      getOrdersByStatus(0).then((res) => {
        if (res.data.code === '200') {;
          this.orderList0 = res.data.data;
        }else{ console.log(res.data.message)
          console.log(res.data.data);}
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })
      getOrdersByStatus(2).then((res) => {
        if (res.data.code === '200') {
          this.orderList2 = res.data.data;
        }else{ console.log(res.data.message)
          console.log(res.data.data);}
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })
    },
send(i){
  changeOrdersStatus(i.id).then((res)=>{
    alert(res.data.message);
    location.reload();
  }).catch((res) => {
    console.log(res.data.message);
  })
},
    getAll() {
      getAllOrders().then((res) => {
        if (res.data.code === '200') {
          this.orderList = res.data.data;
        }else{ console.log(res.data.message)
          console.log(res.data.data);}
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    initDistPicker() {
      // console.log("initDistrictsPicker");
      let self = this;
      this.$Axios.get("https://4myblog.oss-cn-beijing.aliyuncs.com/treasure/districts.json?versionId=CAEQHhiBgMCn4pzfjhgiIGYyOWQ3NWUzZGJjMDQ0NGRhNGRmYmVhMDNhNjczNDgx").then(function (response) {
        // console.log("respones==>", respones);
        let distData = response.data;
        let options = [];
        // 省
        for (const provinceKy in distData["100000"]) {
          let optProvinceItem = {
            value: provinceKy,
            label: distData["100000"][provinceKy]
          };
          if (distData[provinceKy]) {
            // 市
            for (const cityKy in distData[provinceKy]) {
              optProvinceItem.children = optProvinceItem.children
                  ? optProvinceItem.children
                  : [];
              let optCityItem = {
                value: cityKy,
                label: distData[provinceKy][cityKy]
              };
              if (distData[cityKy]) {
                // 区
                for (var areaKy in distData[cityKy]) {
                  optCityItem.children = optCityItem.children
                      ? optCityItem.children
                      : [];
                  let optAreaItem = {
                    value: areaKy,
                    label: distData[cityKy][areaKy]
                  };
                  optCityItem.children.push(optAreaItem);
                }
              }
              optProvinceItem.children.push(optCityItem);
            }
          }
          options.push(optProvinceItem);
        }
        self.distData = distData;
        self.options = options;
      });
    },
    //选择地区
    handleChange(value) {
      let self = this;
      // console.log("value=>", value);
      //获取省名
      self.options.map((item, index) => {
        if (item.value === value[0]) {
          self.cityArr = item.children; //存储城市列表
          self.province = item.label;
        }
      });
      //获取市名
      self.cityArr.map((item, index) => {
        if (item.value == value[1]) {
          self.areaArr = item.children; //存储区县列表
          self.city = item.label;
        }
      });
      //获取区县名
      self.areaArr.map((item, index) => {
        if (item.value == value[2]) {
          self.area = item.label;
        }
      });
      self.addr =self.area+self.addr;
      // console.log("self.provinceCityArea", self.provinceCityArea);
      // console.log(this.form.qyzcd)
    },

    editAddr() {

      let param = {'province':this.province,
                    'city':this.city,
                    'addr':this.addr,
                    'name':this.name,
                    'phone':this.phone
      }
      changeOrdersAddress(this.id,param).then((res)=>{
        console.log(res.data.data);
        alert(res.data.data);
        this.panel=false;






      }).catch((res) => {
        alert(res.data.message);


      });



    },
    choose(i) {
      this.panel = true;
      this.id=i.id;
      this.name=i.name;
      this.phone=i.phone;
      this.province=i.province;
      this.city=i.city;

      this.area=i.area;
      this.addr=i.addr;

    },

    deleteOrder(i) {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = i.id
        deleteOrder(id).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'})
          location.reload();
        }).catch((res) => {
          alert(res.data.message);


        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除操作'
        });
      });

    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getorder(i) {
      searchOrder(i).then((res) => {
        console.log(res.data);
        if (res.data.code === '200') {
          this.orderList = [];
          this.orderList.push(res.data.data)
        }
      }).catch((res) => {
        console.log(res.data.message)
      })
    },

  }

}
</script>

<style scoped>

</style>